<template>
    <div>

        <!-- 搜索 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="selectData" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="selectData.title" placeholder="请输入关键字" />
                </el-form-item>

                <el-form-item label="详情">
                    <el-input v-model="selectData.detail" placeholder="请输入关键字" />
                </el-form-item>

                <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格以及分页 -->
        <div class="table-wrap">
            <el-table :data="dataList.newGoodsList" border style="width: 100%">
                <el-table-column  label="序号" width="180" >
                    <template #default="{$index}">
                     {{$index+1}}
                    </template>
                </el-table-column>
                <el-table-column  prop="id" label="id" width="180" >
                </el-table-column>
                <el-table-column prop="goodsNumber.number" label="编号" width="180" />
                <el-table-column prop="title" label="名称" width="180" />
                <el-table-column prop="" label="封面"  >
                    <template #default="{row}">
                     <div>
                         <el-image
                            :z-index="999"
                            :preview-teleported="true"
                            :src="row.goodsCover"
                            :preview-src-list="[row.goodsCover]"
                            :initial-index="1"
                            />

                     </div>
                    </template>
                </el-table-column>
            </el-table>
            
            <el-pagination layout="prev, pager, next" background :total="selectData.count"
                    :default-page-size="5"
                @current-change="pageChange" @size-change="sizeChange" />

        </div>




    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
import {getGoodsList} from "@/request/api"
import {initData, listInt} from "@/assets/typescript/goods";
import { ElMessage } from 'element-plus'


export default defineComponent({
    setup () {

        // new一个类，然后这个data的值是基于这个类定义的数组的类型去定义的，
        // 也就是说，当前页面导出去data之后，直接使用这个类的数据就行
        const data = reactive(new initData());

        // onMounted生命周期函数不要导出
        onMounted(()=>{
            getList();
        })

        // 获取商品列表
        const getList = ()=>{
            getGoodsList().then(res=>{
                data.goodsList = res.data;
                data.goodsListSave = res.data;
                data.selectData.count = res.data.length
            })
        }


        const dataList = reactive({
            newGoodsList:computed(()=>{
                let list = data.goodsList.splice(
                    (data.selectData.page-1)*data.selectData.pagesize,
                    data.selectData.page*data.selectData.pagesize
                )
                return list
            })
        })

        // 分页器待完善。
        const sizeChange = (pagesize:number)=>{
            data.selectData.pagesize = pagesize;
            
        }
        const pageChange = (page:number)=>{
            data.selectData.page = page;
        }
        const onSubmit = ()=>{
            let arr : listInt[] = [];
            if(!data.selectData.title&&!data.selectData.detail){
                data.goodsList = data.goodsListSave;
                return
            }
            if(data.selectData.title){
                arr = data.goodsList.filter((value:any)=>{
                    return value.title.indexOf(data.selectData.title)!==-1
                })
            }
            data.goodsList = arr;
        }

        watch([()=>data.selectData.title],()=>{
            if(data.selectData.title==""){
                data.goodsList = data.goodsListSave;
                data.selectData.count = data.goodsListSave.length
            }
        })

        return {...toRefs(data),sizeChange,pageChange,dataList,onSubmit,ElMessage}
    }
})
</script>

<style scoped>

</style>